<template>
  <div class="video-surveillance">
    <div class="search-wrap">
      <el-form :inline="true" :model="params">
        <el-row>
          <el-col :span="5.5">
            <el-form-item label="摄像头名称">
              <el-input v-model="params.a" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5.5">
            <el-form-item label="位置">
              <el-select v-model="params.value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> </el-select
            ></el-form-item>
          </el-col>
          <el-col :span="5.5">
            <el-form-item label="在线状态">
              <el-select v-model="params.value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                /> </el-select
            ></el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="getList"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btm-content">
      <div class="left-video">
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <div class="left">
              <span>摄像头1#</span>
              <div class="circle"></div>
            </div>
            <img src="./images/sel-icon.png" alt="" />
          </div>
          <div class="video-wrap">
            <div class="video"></div>
          </div>
        </div>
      </div>
      <div class="right-msg">
        <div class="title">
          <span>设备信息</span>
          <img src="./images/edit-icon.png" alt="" />
        </div>
        <ul class="device-msg">
          <li>设备名称：摄像头1#</li>
          <li>设备型号：bl8810</li>
          <li>通道号：79814510</li>
          <li>位置：南区a地点</li>
          <li>监控方式：固定点监控</li>
        </ul>
        <ul class="person-msg">
          <li>应急联系人：胡兵如</li>
          <li>联系方式：13367890987</li>
          <li>所属部门：监督中心</li>
          <li>职务：管理员</li>
        </ul>
      </div>
    </div>
    <div class="pagination">
      <div class="total">
        共有
        <span>{{ total }}</span>
        个摄像头
      </div>
      <Pagination
        layout="prev, pager, next, sizes, jumper"
        v-model:currentPage="params.page"
        :total="total"
        v-model:page-size="params.pagesize"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let params = reactive({ page: 1, pagesize: 12 });
let total = ref(19);
</script>
<style lang="scss" scoped>
.video-surveillance {
  margin-top: 10px;
  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-top: 12px;
    padding-right: 47px;
    .total {
      margin-right: 50px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      span {
        color: #ffda1c;
      }
    }
  }
  .btm-content {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    .left-video {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        width: 330px;
        height: 208px;
        background: url("./images/video-bgc.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        .video-wrap {
          flex-grow: 1;

          padding: 8px;
          padding-top: 0px;
          .video {
            background: #8c8c;
            width: 100%;
            height: 100%;
          }
        }
        .title {
          padding-left: 11px;
          padding-right: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 38px;
          .left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 16px;
              color: #ffffff;
            }
            .circle {
              margin-left: 13px;
              width: 7px;
              height: 7px;
              background: #06ff34;
              border-radius: 50%;
            }
          }
          img {
            width: 14px;
            height: 10px;
          }
        }
      }
    }
    .right-msg {
      flex-shrink: 0;
      margin-left: 15px;
      width: 241px;
      height: 650px;
      background: url("./images/right-bgc.png") no-repeat;
      background-size: 100% 100%;
      padding-left: 17px;
      padding-right: 21px;
      .person-msg {
        margin-top: 34px;
        li {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #fefefe;
          line-height: 30px;
        }
      }
      .device-msg {
        margin-top: 16px;
        li {
          line-height: 30px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #fefefe;
        }
      }
      .title {
        display: flex;
        padding-top: 42px;
        justify-content: space-between;
        align-items: center;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #61c8ff;
        }
        img {
          width: 16px;
          height: 14px;
        }
      }
    }
  }
  .search-wrap {
    padding-top: 10px;
    padding-left: 12px;
    :deep(.el-button) {
      width: 84px;
      height: 35px;
      background: rgba(27, 168, 255, 0.35);
      border: 1px solid #61c8ff;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      line-height: 23px;

      svg {
        width: 50px !important;
        height: 17px !important;
      }
    }
  }
}
</style>
